import define1 from "./a2e58f97fd5e8d7c@756.js";

function _languageSelector(Radio, md) {
  return Radio(["en"], {
    // label: md`**New!** Language`,
    value: "en", // Default value
  });
}

function* _chart2(html, styles, drawRadialChart) {
  yield html` ${styles}
    <div id="radialChart"></div>`;
  drawRadialChart();
}

//画整体大图
function _drawRadialChart(
  heightRadial,
  xRadial,
  yRadial,
  d3,
  width,
  margin,
  locale,
  languageSelector,
  colorMain,
  data,
  innerRadius,
  outerRadius,
  onMouseOver,
  onMouseOut,
  myDomain,
  extractWorkYear
) {
  return async function drawRadialChart() {
    const height = heightRadial;
    const x = xRadial;
    const y = yRadial;

    const svg = d3
      .select("#radialChart")
      .append("svg")
      .attr("width", width + margin.left + margin.right - 80)
      .attr("height", height + margin.top + margin.bottom + 200);

    // CHART TITLE
    const titleChart = svg.append("g").attr("id", "titleChart");
    const initPosit = 60;
    const diffPosit = 40;
    const fontSize = "40px";
    //写四行标题
    titleChart
      .append("text")
      .attr("x", width / 2)
      .attr("y", initPosit)
      .text(locale[languageSelector].title.a)
      .style("font-size", fontSize)
      .style("text-anchor", "middle")
      .style("fill", colorMain);

    titleChart
      .append("text")
      .attr("x", width / 2)
      .attr("y", initPosit + diffPosit)
      .text(locale[languageSelector].title.b)
      .style("font-weight", 800)
      .style("font-size", fontSize)
      .style("fill", colorMain)
      .style("text-anchor", "middle");
    titleChart
      .append("text")
      .attr("x", width / 2)
      .attr("y", initPosit + diffPosit * 2)
      .text(locale[languageSelector].title.c)
      .style("font-size", fontSize)
      .style("text-anchor", "middle");
    titleChart
      .append("text")
      .attr("x", width / 2)
      .attr("y", initPosit + diffPosit * 3)
      .text(locale[languageSelector].title.d)
      .style("font-size", fontSize)
      .style("text-anchor", "middle");

    // CENTRAL IMAGE
    const imgWidth = 200;
    const imgTest = d3
      .select("#radialChart")
      .append("div")
      .attr("id", "imgProfile")
      .style("width", `${imgWidth}px`)
      .style("height", `${imgWidth}px`)
      //.style("filter", "grayscale(100%)") //控制图片是否是黑白的
      .style("border-radius", "50%")
      .style("background-size", "cover")
      .style("background-position", "center center")
      .style("position", "absolute")
      .style("top", `${margin.top + height / 2 - imgWidth / 2 + 185}px`)
      .style("left", `${width / 2 - imgWidth / 2 + 10}px`)
      .append("p")
      .attr("class", "workInfoExtra")
      .text("");

    // CENTRAL TEXT
    // If empty image: some central text visible
    const titleCenter = svg.append("g").attr("id", "centerText");
    titleCenter
      .append("text")
      .attr("x", width / 2)
      .attr("y", margin.top + height / 2 - 25)
      .text(locale[languageSelector].centerText.a)
      .style("font-size", "19px")
      .style("dominant-baseline", "hanging")
      .style("text-anchor", "middle")
      .style("fill", colorMain);
    titleCenter
      .append("text")
      .attr("x", width / 2)
      .attr("y", margin.top + height / 2)
      .text(locale[languageSelector].centerText.b)
      .style("font-size", "16px")
      .style("font-weight", 800)
      .style("dominant-baseline", "hanging")
      .style("text-anchor", "middle")
      .style("fill", colorMain);
    titleCenter
      .append("text")
      .attr("x", width / 2)
      .attr("y", margin.top + height / 2 + 20)
      .text(locale[languageSelector].centerText.c)
      .style("font-size", "12px")
      .style("dominant-baseline", "hanging")
      .style("text-anchor", "middle")
      .style("fill", colorMain);
    titleCenter.attr("transform", `translate(0,${150})`);

    // SVG CHART
    const chartElGroup = svg
      .append("g")
      .attr("id", "chartElGroup")
      .attr("transform", `translate(0,${margin.top + 150})`);

    // RADIAL BARS
    const barsGroup = chartElGroup
      .append("g")
      .attr("id", "barsGroup")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    barsGroup
      .selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("data-id", (d) => d.id)
      .attr("fill", colorMain)
      .attr(
        "d",
        d3
          .arc()
          .innerRadius((d) => y(+d["YEAR_B"]))
          .outerRadius((d) => y(+d["YEAR_D"] || 2021))
          .startAngle((d) => x(d.id))
          .endAngle((d) => x(d.id) + x.bandwidth())
          .padAngle(0.15)
          .padRadius(innerRadius)
      )
      .attr("opacity", 0)
      .transition()
      .duration(500)
      .delay((d, i) => i * 15)
      .attr("opacity", 1)
      .style("pointer-events", "none");

    // NEW!! Aux elements for interaction//链接交互
    const barsAux = chartElGroup
      .append("g")
      .attr("id", "barsAux")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    barsAux
      .selectAll("a")
      .data(data)
      .enter()
      .append("a")
      .attr("target", "_blank")
      .attr("href", (d) =>
        d.wikipedia != "" && d.wikipedia != "x" ? d.wikipedia : null
      )
      .append("path")
      .attr("class", "aux")
      .attr("data-id", (d) => d.id)
      .attr("fill", "transparent")
      .attr(
        "d",
        d3
          .arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius + 120)
          .startAngle((d) => x(d.id))
          .endAngle((d) => x(d.id) + x.bandwidth())
          .padAngle(0.01)
          .padRadius(innerRadius)
      )
      .style("cursor", (d) =>
        d.wikipedia != "" && d.wikipedia != "x" ? "pointer" : "auto"
      )
      .on("mouseover", onMouseOver)
      .on("mouseout", onMouseOut);

    ///////

    // TIME RINGS在图上画时间坐标
    const decades = [1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020];
    const constDates = chartElGroup.append("g").attr("id", "circlesDates");

    constDates
      .selectAll("circle")
      .data(decades)
      .join("circle")
      .attr("cx", width / 2)
      .attr("cy", height / 2)
      .attr("r", (d) => y(d))
      .style("fill", "none")
      .style("stroke", "white")
      .style("stroke-width", "2")
      .style("pointer-events", "none");

    constDates
      .selectAll("text")
      .data(decades)
      .join("text")
      .attr("x", (d) => width / 2 + y(d) + 2)
      .attr("y", (d) => height / 2)
      .text((d) => d)
      .style("fill", colorMain)
      .style("opacity", 0.7)
      .style("font-size", "12px")
      .style("pointer-events", "none");

    // WOMEN'S INFO在图上标注人物信息
    const womenInfoGroup = chartElGroup
      .append("g")
      .attr("id", "womenInfo")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    womenInfoGroup
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("class", "womanInfo")
      .attr("id", (d) => d.id)
      .attr("opacity", 0.8)
      .attr("transform", function (d) {
        const defunctionYear = +d["YEAR_D"] || 2023;
        const angleToRotate =
          ((x(d.id) + x.bandwidth() / 2) * 180) / Math.PI - 90;
        return `rotate(${angleToRotate})`;
      })
      .attr("text-anchor", function (d) {
        return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI //名字的位置小于π，就以名字尾巴作为起点，否则以头为起点
          ? "end"
          : "start";
      })
      .each(function (d) {
        const el = d3.select(this);

        // NAMES (anchors to wikipedia links)
        el.append("text")
          .attr("data-id", (d) => d.id)
          //.style('opacity', 0.5)
          .style("opacity", (d) =>
            d.wikipedia != "" && d.wikipedia != "x" ? 0.7 : 0.3
          )
          .attr("x", function (d) {
            return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) <
              Math.PI
              ? -y(+d["YEAR_D"] || 2021) - 10
              : y(+d["YEAR_D"] || 2021) + 10;
          })
          .attr("y", 0)
          .text((d) => `${d.NAME} ${d.SURNAME}.`)
          .style("font-size", "15px")
          .style("text-decoration", (d) =>
            d.wikipedia != "" && d.wikipedia != "x" ? "underline" : "none"
          )
          .style("dominant-baseline", "middle")
          // Rotation to improve readability旋转字体
          .attr("transform", function (d) {
            return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) <
              Math.PI
              ? "rotate(180)"
              : "rotate(0)";
          });

        // LINES
        el.append("line")
          .attr("x1", 120)
          .attr("x2", y(myDomain[1]) + 100)
          .attr("y1", 0)
          .attr("y2", 0)
          .style("stroke", "black")
          .style("opacity", 0.7)
          .style("stroke-width", 0.15);

        // SELECTED WORK POINT
        el.append("circle")
          .attr("class", "selectedWorkPoint")
          .attr("cx", (d) => y(extractWorkYear(d)))
          .attr("cy", 0)
          .attr("r", 2.5)
          .style("fill", "black");
      })
      .style("pointer-events", "none");

    // LEGEND
    // Just on desktop
    //复制bar和点，复制出一圈
    if (width >= 340) {
      d3.select("#barsGroup path") // First path
        .clone()
        .attr("id", "legendBar")
        .attr("transform", "translate(275, 525)rotate(-5)"); //右下角那个小图例的扇形
      d3.select("#womenInfo g .selectedWorkPoint") // First group克隆那些巅峰时刻的点
        .clone()
        .attr("id", "legendInfo")
        .attr("transform", "translate(280, 472)");
      //写图例
      const legend = svg
        .append("g")
        .attr("id", "legend")
        // Apply same transform as chart
        .attr("transform", "translate(" + width / 2 + "," + height + ")");
      legend //画图例的线
        .append("line")
        .attr("x1", outerRadius - 59)
        .attr("x2", outerRadius - 59)
        .attr("y1", 310)
        .attr("y2", 330)
        .style("stroke", "black")
        .style("stroke-width", 0.5)
        .style("stroke-dasharray", 3);
      legend
        .append("line")
        .attr("x1", outerRadius + 78)
        .attr("x2", outerRadius + 78)
        .attr("y1", 304)
        .attr("y2", 334)
        .style("stroke", "black")
        .style("stroke-width", 0.5)
        .style("stroke-dasharray", 3);
      legend
        .append("text")
        .attr("x", outerRadius - 95)
        .attr("y", 303)
        .text(locale[languageSelector].legend.yearOfBirth)
        .style("font-size", "12px");
      legend
        .append("text")
        .attr("x", outerRadius + 170)
        .attr("y", 345)
        .text(locale[languageSelector].legend.name)
        .style("opacity", 0.5)
        .style("font-size", "16px");
      legend
        .append("text")
        .attr("x", outerRadius + 30)
        .attr("y", 280)
        .text(locale[languageSelector].legend.exampleWork.a)
        .style("font-size", "12px");
      legend
        .append("text")
        .attr("x", outerRadius + 30)
        .attr("y", 295)
        .text(locale[languageSelector].legend.exampleWork.b)
        .style("font-size", "12px");
    }
  };
}

function _onMouseOver(d3, extractWorkNAME) {
  return function onMouseOver(event, d, i) {
    console.log(d);
    const myImgProfile = d.imgProfile;
    const myId = d.id;
    //console.log(myImgProfile);

    d3.select("#barsGroup")
      .selectAll(`path:not(path[data-id=${myId}])`)
      .style("opacity", 0.5);

    d3.select("#womenInfo")
      .selectAll(`text[data-id=${myId}]`)
      .style("opacity", 1);

    d3.select("#womenInfo")
      .selectAll(`text:not(text[data-id=${myId}])`)
      .style("opacity", 0.2);

    // Update bckg img
    d3.select("#imgProfile")
      .style("background-image", `url(${myImgProfile})`)
      .select("p")
      .text(extractWorkNAME(d));
    d3.select(this).style("opacity", 1);
  };
}

function _onMouseOut(d3) {
  return function onMouseOut(event, d, i) {
    d3.select(this).style("opacity", 0.8);

    d3.select("#barsGroup").selectAll("path").style("opacity", 1);

    d3.select("#womenInfo")
      .selectAll(`text`)
      .style("opacity", (d) =>
        d.wikipedia != "" && d.wikipedia != "x" ? 0.7 : 0.3
      );

    d3.select("#imgProfile")
      .style("background-image", `none`)
      .select("p")
      .text("");
  };
}

function _search03(Search, architectsAndDesigners_Features) {
  return Search(
    architectsAndDesigners_Features.map((d) => d.properties),
    {
      // placeholder: "Buscador designers_2Features"
    }
  );
}

function _table03(Table, search03, html) {
  return Table(search03, {
    //rows: 110,
    columns: [
      "NAME",
      "SURNAME",
      "YEAR_B",
      "YEAR_D",
      //"IMG_SRC_D",
      "WORKS_NA_2",
      //"WORK_PREC"
    ],
    format: {
      NAME: (x) => html`${x}`,
      SURNAME: (x) => html`${x}`,
      IMG_SRC_D: (x) => html`${x}`,
      WORKS_NA_2: (x) => html`${x}`,
    },
  });
}

function _json_architectsAndDesigners_URL() {
  return "other_politic.json";
}

async function _json_architectsAndDesigners(json_architectsAndDesigners_URL) {
  return (await fetch(json_architectsAndDesigners_URL)).json();
}

function _architectsAndDesigners_Features(json_architectsAndDesigners) {
  return json_architectsAndDesigners;
}

function _wikipedia() {
  return {
    en: {
      "woman-0":
        "https://baike.baidu.com/item/%E5%85%B0%E9%87%91/1474553?fr=ge_ala",
      "woman-1":
        "https://baike.baidu.com/link?url=SGDaaMnzJM_NLSZYRXKO77TN6uoDK6dvzn9yFwICuousHgxcB1VEkbl9CjdjWSIk_2gdisXU9UiAg1K8cF8OlqASeB-G74Ztni8T7o7skL7aSsdNFL1m1zfNUPEv0lcI",
      "woman-2": "https://weibo.com/ttarticle/p/show?id=2309404612079158952055",
      "woman-3":
        "https://baike.baidu.com/item/%E5%AE%89%E5%A8%9C%C2%B7%E5%9F%83%E8%8E%89%E8%AF%BA%C2%B7%E7%BD%97%E6%96%AF%E7%A6%8F/243493?fr=ge_ala",
      "woman-4":
        "https://baike.baidu.com/item/%E7%8E%9B%E6%A0%BC%E4%B8%BD%E7%89%B9%C2%B7%E8%94%A1%E6%96%AF%C2%B7%E5%8F%B2%E5%AF%86%E6%96%AF/2674321?fr=ge_ala",
      "woman-5":
        "https://baike.baidu.com/item/%E7%8E%9B%E6%A0%BC%E4%B8%BD%E7%89%B9%C2%B7%E8%94%A1%E6%96%AF%C2%B7%E5%8F%B2%E5%AF%86%E6%96%AF/2674321?fr=ge_ala",
      "woman-6":
        "https://en.wikipedia.org/wiki/Margarete_Sch%C3%BCtte-Lihotzky",
      "woman-7":
        "https://baike.baidu.com/link?url=m6zA5No7LXD8U8K8lo7HGXU7FI00ZAAhOot3k8nBWMnM5YU5gNXA2N9pJyvrpWrrDP0zHq86i1PmSAvmV1k7Nzn0FGaoCbN6mGWqD9zIp61ZD-230P7KqbDayom4s_z1",
      "woman-8":
        "https://baike.baidu.com/link?url=m6zA5No7LXD8U8K8lo7HGXU7FI00ZAAhOot3k8nBWMnM5YU5gNXA2N9pJyvrpWrrDP0zHq86i1PmSAvmV1k7Nzn0FGaoCbN6mGWqD9zIp61ZD-230P7KqbDayom4s_z1",
      "woman-9":
        "https://baike.baidu.com/link?url=sMpOeH3eMvn-z-dQbJbr3OH4P900AkMrQnpRk9IDohL41MH388fC_sqHYX9Rzp5-XMSEFrtXhmA66GAeohoYNJmE3ozOpGn13KJSSNZI22K",
      "woman-10":
        "https://baike.baidu.com/item/%E8%A5%BF%E4%B8%BD%E7%8E%9B%E6%B2%83%C2%B7%E7%8F%AD%E8%BE%BE%E6%8B%89%E5%A5%88%E5%85%8B/4448383?fr=ge_ala",
      "woman-11":
        "https://www.womenshistory.org/education-resources/biographies/patsy-mink",
      "woman-12":
        "https://baike.baidu.com/item/%E8%8A%AD%E8%8A%AD%E6%8B%89%C2%B7%E4%B9%94%E4%B8%B9/5625456?fr=ge_ala",
      "woman-13":
        "https://baike.baidu.com/link?url=_0tbrqNYmRuIdjJ6yEu1mEHzS3RwCK58ob4uoDK5taLJhFDRmElAAEYyN2z7wybBoBEua7NZp558rqDAemut-Jvh0XlZvxMNiZki6lKxgTJVySFufMvTrKvszZu5RxSv8w88tOQ3RC6-zRfnpgtymq",
      "woman-14": "https://zhuanlan.zhihu.com/p/582235371",
      "woman-15":
        "https://blogs.lse.ac.uk/lsehistory/2019/02/13/maureen-colquhoun/",
      "woman-16":
        "https://baike.baidu.com/item/%E7%8E%9B%E6%A0%BC%E4%B8%BD%E7%89%B9%C2%B7%E5%B8%8C%E5%B0%94%E8%BE%BE%C2%B7%E6%92%92%E5%88%87%E5%B0%94/2600274?fr=ge_ala",
      "woman-17":
        "https://baike.baidu.com/item/%E6%A1%91%E5%BE%B7%E6%8B%89%C2%B7%E6%88%B4%C2%B7%E5%A5%A5%E5%BA%B7%E7%BA%B3/7999524?fr=ge_ala",
      "woman-18":
        "https://baike.baidu.com/item/%E9%82%93%E9%A2%96%E8%B6%85/116019?fr=ge_ala",
      "woman-19":
        "https://baike.baidu.com/item/%E9%99%88%E6%85%95%E5%8D%8E/1896623?fr=ge_ala",
      "woman-20":
        "https://baike.baidu.com/item/%E7%A7%91%E6%8B%89%E6%9D%BE%C2%B7%E9%98%BF%E5%9F%BA%E8%AF%BA?fromModule=lemma_search-box",
      "woman-21":
        "https://baike.baidu.com/item/%E5%9C%9F%E4%BA%95%E5%A4%9A%E8%B4%BA%E5%AD%90/7632101?fr=aladdin",
      "woman-22":
        "https://baike.baidu.com/item/%E8%B4%9D%E5%A8%9C%E9%BD%90%E5%B0%94%C2%B7%E5%B8%83%E6%89%98/2987750?fr=ge_ala",
      "woman-23":
        "https://baike.baidu.com/item/%E9%A9%AC%E5%BE%B7%E7%90%B3%C2%B7%E5%A5%A5%E5%B0%94%E5%B8%83%E8%B5%96%E7%89%B9/9965673?fr=ge_ala",
      "woman-24":
        "https://baike.baidu.com/link?url=Mi9rGCdf7XKt6wLA-15UX1HDlu8NjPVHHcGMFs0SZD_mPyEm3SY7gwtv1KxcBZ29cT8sAAeHRx5JE-aDvbOJxibnvMnxV4YpXlhURHKiitm1a-1hP7ENa5_48FgakdEiLxVDSHyLm5WMIHWNNknTaAmVPoycU2rqb6oSh_1ZpDyQ0drx4ygaf_lSF4A1pvMENd8wGCSMmW3J2g-X_rbkoFHfdYZdYTqVB6tFzAtG3zCB5_fb0Hyz8z2CrCSoUghi",
      "woman-25":
        "https://baike.baidu.com/item/%E5%AE%89%E6%A0%BC%E6%8B%89%C2%B7%E9%BB%98%E5%85%8B%E5%B0%94/3335469?fr=ge_ala",
      "woman-26":
        "https://baike.baidu.com/link?url=xkI1nOtFPUFVD3FzTRDNCjqCGGnf1BtA-2XHqjSx7JWkYbBoMczGmIZUEU_wvXDt4w_O7zvyVF9tTmxsHMaC_hHHfdfaD5wBdNN3h1MaE1CvRwbaBMYLhdmWowsD_Jvymagpfdc4bHX-lcRIJrQo354kyTMheP0GYg1tkYTwnoq",
      "woman-27":
        "https://baike.baidu.com/item/%E5%B0%A4%E5%88%A9%E5%A8%85%C2%B7%E5%AD%A3%E8%8E%AB%E7%94%B3%E7%A7%91/1438659?fr=ge_ala",
      "woman-28":
        "https://baike.baidu.com/item/%E7%BB%B4%E7%BD%97%E5%A6%AE%E5%8D%A1%C2%B7%E7%B1%B3%E6%AD%87%E5%B0%94%C2%B7%E5%B7%B4%E5%88%87%E8%8E%B1%E7%89%B9%C2%B7%E8%B5%AB%E9%87%8C%E4%BA%9A/23762682?fromtitle=%E5%B7%B4%E5%88%87%E8%8E%B1%E7%89%B9&fromid=3080711",
      "woman-29":
        "https://baike.baidu.com/item/%E5%87%AF%E7%91%9F%E7%90%B3%C2%B7%E8%A5%BF%E8%B4%9D%E6%9F%B3%E6%96%AF/12577447?fr=ge_ala",
      "woman-30":
        "https://baike.baidu.com/item/%E7%B4%A2%E5%B0%BC%E5%A8%85%C2%B7%E7%B4%A2%E6%89%98%E9%A9%AC%E7%BA%A6%E5%B0%94/5913172?fr=ge_ala",
      "woman-31": "https://www.britannica.com/biography/Johanna-Sigurdardottir",
      "woman-32":
        "https://baike.baidu.com/item/%E8%BE%BE%E5%88%A9%E5%A8%85%C2%B7%E6%A0%BC%E9%87%8C%E5%8C%85%E6%96%AF%E5%87%AF%E7%89%B9/5420361?fr=ge_ala#7",
      "woman-33":
        "https://baike.baidu.com/item/%E6%9C%B1%E8%8E%89%E5%A8%85%C2%B7%E5%90%89%E6%8B%89%E5%BE%B7/2552621?fr=ge_ala",
      "woman-34":
        "https://baike.baidu.com/item/%E5%A1%94%E7%93%A6%E5%BA%93%C2%B7%E5%8D%A1%E6%9B%BC/6660171?fromtitle=%E5%A1%94%E7%93%A6%E5%BA%93%E5%8B%92%C2%B7%E5%8D%A1%E6%9B%BC&fromid=6643926",
      "woman-35":
        "https://baike.baidu.com/item/%E8%8B%B1%E6%8B%89%C2%B7%E8%A5%BF%E9%82%A3%E7%93%A6/8904722?fr=ge_ala",
      "woman-36":
        "https://baike.baidu.com/item/%E8%B5%AB%E5%8B%92%C2%B7%E6%89%98%E5%AE%81%C2%B7%E6%96%BD%E5%AF%86%E7%89%B9/4519260?fr=ge_ala",
      "woman-37":
        "https://baike.baidu.com/item/%E5%B8%8C%E6%8B%89%E9%87%8C%C2%B7%E9%BB%9B%E5%AE%89%C2%B7%E7%BD%97%E5%BE%B7%E5%A7%86%C2%B7%E5%85%8B%E6%9E%97%E9%A1%BF/4119832?fr=ge_ala",
      "woman-38":
        "https://baike.baidu.com/item/%E7%89%B9%E9%9B%B7%E8%8E%8E%C2%B7%E6%A2%85/19783993?fr=ge_ala",
      "woman-39":
        "https://baike.baidu.com/link?url=f-ugSTqyzws0M4G9P67D5YLTq0nV2Rf7EqA0nVOu6gJXzjgcRuJhAG49d3VQPU4pAAsA4xfnNBeo6dIQhHDLgriOadF3_-7Xnyyx7F22CD8pa12GsjuN58WFl83guG2X",
      "woman-40":
        "https://baike.baidu.com/item/%E9%98%BF%E5%A8%9C%C2%B7%E5%B8%83%E5%B0%94%E7%BA%B3%E6%AF%94%E5%A5%87/22060530?fr=ge_ala",
      "woman-41":
        "https://baike.baidu.com/item/%E6%9E%97%E9%83%91%E6%9C%88%E5%A8%A5/4384396?fr=ge_ala",
      "woman-42":
        "https://baike.baidu.com/item/%E5%93%88%E8%8E%89%E7%8E%9B%C2%B7%E9%9B%85%E5%90%84%E5%B8%83/3594961?fr=ge_ala",
      "woman-43":
        "https://baike.baidu.com/item/%E4%B9%8C%E5%B0%94%E8%8B%8F%E6%8B%89%C2%B7%E5%86%AF%E5%BE%B7%E8%8E%B1%E6%81%A9/12700646?fr=ge_ala",
      "woman-44":
        "https://baike.baidu.com/item/%E6%A1%91%E5%A8%9C%C2%B7%E9%A9%AC%E6%9E%97/24190290?fr=ge_ala",
      "woman-45":
        "https://baike.baidu.com/item/%E6%A2%85%E7%89%B9%C2%B7%E5%BC%97%E9%9B%B7%E6%B3%BD%E9%87%8C%E5%85%8B%E6%A3%AE/23552594?fr=ge_ala",
      "woman-46":
        "https://baike.baidu.com/item/%E9%A9%AC%E5%A8%85%C2%B7%E6%A1%91%E6%9D%9C/22195140?fr=ge_ala",
      "woman-47": "https://upimg.baike.so.com/doc/29084945-30564532.html",
      "woman-48":
        "https://baike.baidu.com/item/%E5%8D%A1%E7%8E%9B%E6%8B%89%C2%B7%E5%93%88%E9%87%8C%E6%96%AF/23263868?fr=ge_ala",
      "woman-49":
        "https://baike.baidu.com/item/%E5%8D%A1%E5%A8%85%C2%B7%E5%8D%A1%E6%8B%89%E6%96%AF/23281855?fr=ge_ala",
    },
  };
}

function _data(
  table03,
  parseHtmlToText,
  extractWorkYear,
  getImg,
  wikipedia,
  languageSelector
) {
  return (
    table03
      .map((d, i) => {
        d.NAME = parseHtmlToText(d.NAME);
        d.SURNAME = parseHtmlToText(d.SURNAME);
        d.workPiece = extractWorkYear(d);
        d.id = `woman-${i}`;
        d.imgProfile = d.IMG_SRC_D;
        d.wikipedia = wikipedia[languageSelector][`woman-${i}`];
        return d;
      })

      //.sort((b, a) => extractWorkYear(a) - extractWorkYear(b))//根据巅峰时刻排序

      .sort((a, b) => a["YEAR_B"] - b["YEAR_B"])
  );
}

function _dataTable(Table, data) {
  return Table(data, {});
}

function _extractWorkYear() {
  return (d) => +d.WORKS_NA_2.split(",")[1];
}

function _extractWorkNAME(parseHtmlToText) {
  return (d) => parseHtmlToText(d.WORKS_NA_2);
}

function _getImg() {
  return function (string) {
    console.log(string);
    const array = string.split("/");
    const imgName = array[array.length - 1].slice(0, -2);
    return imgName;
  };
}

function _workYear(data) {
  return data.map((d) => +d.WORKS_NA_2.split(",")[1]);
}

function _parseHtmlToText() {
  return (d) => d.replace(/(<([^>]+)>)/gi, "");
}

function _41(md) {
  return md`
### Dimensions
  `;
}

function _margin() {
  return { top: 160, right: 10, bottom: 50, left: 70 };
}

function _heightRadial() {
  return 1000;
}

function _myDomain() {
  return [1850, 2023];
}

function _xRadial(d3, data) {
  return d3
    .scaleBand()
    .range([Math.PI / 2 + 0.04, Math.PI / 2 + 2 * Math.PI - 0.1])
    .align(0)
    .domain(data.map((d) => d.id));
}

function _innerRadius() {
  return 50;
}

function _outerRadius() {
  return 450;
}

function _yRadial(d3, innerRadius, outerRadius, myDomain) {
  return d3.scaleLinear().range([innerRadius, outerRadius]).domain(myDomain);
}

function _colorMain() {
  return "#E16767";
}

function _colorBckg() {
  return "#f0f0f0";
}

function _styles(html, colorBckg) {
  return html`
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Baumans&display=swap"
      rel="stylesheet"
    />

    <style>
      svg {
        font-family: "Baumans", sans-serif;
      }
      #radialChart {
        background-color: ${colorBckg};
      }
      #imgProfile {
        box-shadow: 0px 0px 27px 2px rgba(0, 0, 0, 0.15) inset;
        -webkit-box-shadow: 0px 0px 27px 2px rgba(0, 0, 0, 0.15) inset;
        -moz-box-shadow: 0px 0px 27px 2px rgba(0, 0, 0, 0.15) inset;
      }

      #barsGroup path#legendBar {
        opacity: 1 !important;
      }

      .workInfoExtra {
        position: relative;
        top: 150px;
        left: 70px;
        font-size: 10px;
        font-family: "Baumans", sans-serif;
        //background: rgba(255,255,255,0.5);
        background: ${colorBckg};
        padding: 0 5px;
      }
    </style>
  `;
}

function _locale() {
  return {
    en: {
      title: {
        a: "50 Influential Female Politicians",
        b: "you need to know",
        c: "",
        d: "",
      },
      centerText: {
        a: "150 years",
        b: "50 Female Politicians",
        c: "around the World",
      },
      legend: {
        yearOfBirth: "Year of birth",
        name: "Name",
        exampleWork: {
          a: "the capstone of",
          b: "her political career",
        },
      },
    },
  };
}

export default function define(runtime, observer) {
  const main = runtime.module();

  main
    .variable(observer("viewof languageSelector"))
    .define("viewof languageSelector", ["Radio", "md"], _languageSelector);
  main
    .variable(observer("languageSelector"))
    .define(
      "languageSelector",
      ["Generators", "viewof languageSelector"],
      (G, _) => G.input(_)
    );
  main
    .variable(observer("chart2"))
    .define("chart2", ["html", "styles", "drawRadialChart"], _chart2);
  main
    .variable(observer("drawRadialChart"))
    .define(
      "drawRadialChart",
      [
        "heightRadial",
        "xRadial",
        "yRadial",
        "d3",
        "width",
        "margin",
        "locale",
        "languageSelector",
        "colorMain",
        "data",
        "innerRadius",
        "outerRadius",
        "onMouseOver",
        "onMouseOut",
        "myDomain",
        "extractWorkYear",
      ],
      _drawRadialChart
    );
  main
    .variable(observer("onMouseOver"))
    .define("onMouseOver", ["d3", "extractWorkNAME"], _onMouseOver);
  main
    .variable(observer("onMouseOut"))
    .define("onMouseOut", ["d3"], _onMouseOut);
  main
    .variable(observer("viewof search03"))
    .define(
      "viewof search03",
      ["Search", "architectsAndDesigners_Features"],
      _search03
    );
  main
    .variable(observer("search03"))
    .define("search03", ["Generators", "viewof search03"], (G, _) =>
      G.input(_)
    );
  main
    .variable(observer("viewof table03"))
    .define("viewof table03", ["Table", "search03", "html"], _table03);
  main
    .variable(observer("table03"))
    .define("table03", ["Generators", "viewof table03"], (G, _) => G.input(_));
  main
    .variable(observer("json_architectsAndDesigners_URL"))
    .define(
      "json_architectsAndDesigners_URL",
      _json_architectsAndDesigners_URL
    );
  main
    .variable(observer("json_architectsAndDesigners"))
    .define(
      "json_architectsAndDesigners",
      ["json_architectsAndDesigners_URL"],
      _json_architectsAndDesigners
    );
  main
    .variable(observer("architectsAndDesigners_Features"))
    .define(
      "architectsAndDesigners_Features",
      ["json_architectsAndDesigners"],
      _architectsAndDesigners_Features
    );
  main.variable(observer("wikipedia")).define("wikipedia", _wikipedia);
  main
    .variable(observer("data"))
    .define(
      "data",
      [
        "table03",
        "parseHtmlToText",
        "extractWorkYear",
        "getImg",
        "wikipedia",
        "languageSelector",
      ],
      _data
    );
  main
    .variable(observer("viewof dataTable"))
    .define("viewof dataTable", ["Table", "data"], _dataTable);
  main
    .variable(observer("extractWorkYear"))
    .define("extractWorkYear", _extractWorkYear);
  main
    .variable(observer("extractWorkNAME"))
    .define("extractWorkNAME", ["parseHtmlToText"], _extractWorkNAME);
  main.variable(observer("getImg")).define("getImg", _getImg);
  main.variable(observer("workYear")).define("workYear", ["data"], _workYear);
  main
    .variable(observer("parseHtmlToText"))
    .define("parseHtmlToText", _parseHtmlToText);
  main.variable(observer()).define(["md"], _41);
  main.variable(observer("margin")).define("margin", _margin);
  main.variable(observer("heightRadial")).define("heightRadial", _heightRadial);
  main.variable(observer("myDomain")).define("myDomain", _myDomain);
  main
    .variable(observer("xRadial"))
    .define("xRadial", ["d3", "data"], _xRadial);
  main.variable(observer("innerRadius")).define("innerRadius", _innerRadius);
  main.variable(observer("outerRadius")).define("outerRadius", _outerRadius);
  main
    .variable(observer("yRadial"))
    .define(
      "yRadial",
      ["d3", "innerRadius", "outerRadius", "myDomain"],
      _yRadial
    );
  main.variable(observer("colorMain")).define("colorMain", _colorMain);
  main.variable(observer("colorBckg")).define("colorBckg", _colorBckg);
  main
    .variable(observer("styles"))
    .define("styles", ["html", "colorBckg"], _styles);
  main.variable(observer("locale")).define("locale", _locale);

  const child1 = runtime.module(define1);
  main.import("Radio", child1);
  main.import("Table", child1);
  main.import("Search", child1);
  return main;
}
